import React, { useState, useEffect } from 'react';
import './My.css'
import { useNavigate } from 'react-router-dom';
import { Avatar, Button, List, Card, Tag, Grid, Toast } from 'antd-mobile';
import { getRiderInfo, logout } from '../utils/auth';

function My() {
    const [riderInfo, setRiderInfo] = useState(null);
    const [userInfo, setUserInfo] = useState({
        name: '',
        avatar: '',
        phone: '',
        level: '新手骑手',
        rating: 0.0,
        totalOrders: 0,
        totalEarnings: 0,
        onlineTime: '0小时0分',
        experience: 0,
        nextLevel: '铜牌骑手',
        levelProgress: 0
    });

    const menuItems = [
        { icon: '⚙️', text: '设置', arrow: true, badge: '' },
        { icon: '💬', text: '客服中心', arrow: true, badge: '在线' },
        { icon: '🎁', text: '邀请好友', arrow: true, badge: '奖励' },
        { icon: '💝', text: '意见反馈', arrow: true, badge: '' },
        { icon: '📱', text: '关于我们', arrow: true, badge: 'v1.0.2' }
    ];

    const navigate = useNavigate();

    // 获取骑手信息
    useEffect(() => {
        const info = getRiderInfo();
        if (info) {
            setRiderInfo(info);
            // 更新用户信息显示
            setUserInfo(prev => ({
                ...prev,
                name: info.name || '骑手',
                phone: info.phone || '',
                rating: info.rating || 0.0,
                level: getLevelByOrders(info.totalOrders || 0),
                totalOrders: info.totalOrders || 0,
                totalEarnings: info.totalEarnings || 0,
                onlineTime: info.onlineTime || '0小时0分'
            }));
        }
    }, []);

    // 根据订单数计算等级
    const getLevelByOrders = (orders) => {
        if (orders >= 1000) return '王者骑手';
        if (orders >= 500) return '钻石骑手';
        if (orders >= 200) return '金牌骑手';
        if (orders >= 100) return '银牌骑手';
        if (orders >= 50) return '铜牌骑手';
        return '新手骑手';
    };

    const handleLogout = () => {
        logout();
        navigate('/login');
        Toast.show({ content: '已退出登录' });
    };

    // 如果没有登录信息，显示登录提示
    if (!riderInfo) {
        return (
            <div className="my-container">
                <div className="user-card">
                    <div className="user-header">
                        <div className="user-avatar">
                            <Avatar
                                style={{ '--size': '80px' }}
                                className="avatar-img"
                            >
                                👤
                            </Avatar>
                        </div>
                        <div className="user-info">
                            <h2 className="user-name">请先登录</h2>
                            <p className="user-phone">登录后查看个人信息</p>
                        </div>
                        <Button
                            size="small"
                            fill="outline"
                            className="edit-btn"
                            onClick={() => navigate('/login')}
                        >
                            去登录
                        </Button>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="my-container">
            {/* 用户信息卡片 */}
            <div className="user-card">
                <div className="user-header">
                    <div className="user-avatar">
                        <Avatar
                            src={userInfo.avatar}
                            style={{ '--size': '80px' }}
                            className="avatar-img"
                        >
                            {userInfo.name.charAt(0)}
                        </Avatar>
                        <div className="level-badge">
                            <Tag color="warning" fill="solid" size="small">
                                {userInfo.level}
                            </Tag>
                        </div>
                    </div>
                    <div className="user-info">
                        <h2 className="user-name">{userInfo.name}</h2>
                        <p className="user-phone">手机号: {userInfo.phone}</p>
                        <div className="user-rating">
                            <span className="rating-icon">⭐</span>
                            <span className="rating-score">{userInfo.rating}</span>
                            <span className="rating-text">分</span>
                        </div>
                    </div>
                    <Button
                        size="small"
                        fill="outline"
                        className="edit-btn"
                        onClick={() => navigate('/profile')}
                    >
                        编辑资料
                    </Button>
                </div>
            </div>

            {/* 功能菜单 */}
            <div className="menu-section">
                <List className="menu-list">
                    {menuItems.map((item, index) => (
                        <List.Item
                            key={index}
                            className="menu-item"
                            arrow={item.arrow}
                            onClick={() => console.log(`点击${item.text}`)}
                        >
                            <div className="menu-content">
                                <div className="menu-icon">{item.icon}</div>
                                <span className="menu-text">{item.text}</span>
                                {item.badge && (
                                    <Tag 
                                        color={item.badge === '在线' ? 'success' : item.badge === '奖励' ? 'warning' : 'default'}
                                        fill="outline"
                                        size="small"
                                        className="menu-badge"
                                    >
                                        {item.badge}
                                    </Tag>
                                )}
                            </div>
                        </List.Item>
                    ))}
                </List>
            </div>

            {/* 退出登录 */}
            <div className="logout-section">
                <Button
                    className="logout-btn"
                    fill="outline"
                    onClick={handleLogout}
                >
                    🚪
                    退出登录
                </Button>
            </div>

            {/* 版本信息 */}
            <div className="version-info">
                <p>骑手端 v1.0.22</p>
                <p>© 2026 配送平台</p>
            </div>
        </div>
    );
}

export default My;